<template>
  <el-tree :data="state.dataList" :props="defaultProps" :expand-on-click-node="false" node-key="catId" show-checkbox>
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2" size="minis" @click="append(data)"> Append </el-button>
          <el-button v-if="node.childNodes.length === 0" size="mini" @click="remove(node, data)"> Delete </el-button>
        </span>
      </span>
    </template>
  </el-tree>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import { number } from "echarts";

const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);
const visible = ref(false);

const view = reactive({
  getDataListURL: "/project/pmscategory/tree"
});

const dataForm = reactive({
  id: "",
  name: "",
  pid: "",
  leaderId: "",
  leaderName: "",
  parentName: "",
  sort: 0
});

const state = reactive({ ...useView(view), ...toRefs(view) });

interface Tree {
  catId:number;
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};

const append = (data: Tree) => {
  console.log("append", data);
};

const remove = (node: Tree, data: Tree) => {
   console.log("要删除的数据:", data); 
  const ids = [data.catId];
   (baseService.post )("/project/pmscategory/delete", ids).then((res) => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  console.log("remove", node, data);
};

const data: Tree[] = [];

const defaultProps = {
  children: "children",
  label: "name",
  catId:"catId"
};
</script>
